<template>
  <div id="mapTitle">
    <div class="mapTitle">
      <h1>联运e达运营监测地图</h1>
      <h4>operational monitoring map</h4>
    </div>
    <div class="titleData" v-if="isload">
      <div class="titleDataCol">
        <div class="dataTitle">今日转运总量</div>
        <div class="data"><span
          class="dataArry">{{(((+toDayDataTitleList.xcSendNum+toDayDataTitleList.xcArriveNum+toDayDataTitleList.zcSendNum+toDayDataTitleList.zcArriveNum)/10000).toFixed(floatNum)+'').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')}}</span>万吨
        </div>
      </div>
      <div class="titleDataCol">
        <div class="dataTitle">今日整车&nbsp;&nbsp;到/发量</div>
        <div class="data"><span class="dataArry">
          {{(((+toDayDataTitleList.zcArriveNum)/10000)>0?((+toDayDataTitleList.zcArriveNum)/10000).toFixed(floatNum):0+'').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')}}/
          {{(((+toDayDataTitleList.zcSendNum)/10000)>0?((+toDayDataTitleList.zcSendNum)/10000).toFixed(floatNum):0+'').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')}}</span>万吨
        </div>
      </div>
      <div class="titleDataCol">
        <div class="dataTitle">今日集装箱&nbsp;&nbsp;到/发量</div>
        <div class="data"><span class="dataArry">
          {{(((+toDayDataTitleList.xcArriveNum)/10000)>0?((+toDayDataTitleList.xcArriveNum)/10000).toFixed(floatNum):0+'').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')}}/
          {{(((+toDayDataTitleList.xcSendNum)/10000)>0?((+toDayDataTitleList.xcSendNum)/10000).toFixed(floatNum):0+'').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')}}</span>万吨
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {freightCenterDataLight} from '@api/lightStation/station'
  import moment from 'moment'
  import _ from 'lodash'

  export default {
    name: 'mapTitle',
    data () {
      // let endTime = moment().format('YYYY-MM-DD') + ' 23:59:59'
      let floatNum = 2
      let endTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 23:59:59'
      let dayStartTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 00:00:00'
      let monthStartTime = moment().subtract(1, 'days').month(moment().month() - 1).format('YYYY-MM-DD') + ' 00:00:00'
      let yearStartTime = moment().subtract(1, 'days').year() - 1 + '-' + moment().month(moment().month()).format('MM-DD') + ' 00:00:00'
      let toDayDataTitleList = {}
      let isload = false
      let datas = {floatNum, isload, endTime, dayStartTime, monthStartTime, yearStartTime, toDayDataTitleList}
      return datas
    },
    props: {},
    computed: {},
    methods: {
      getTableDataDay () {
        let paramDay = {startTime: this.dayStartTime, endTime: this.endTime}
        let dataListDay = {}
        freightCenterDataLight(paramDay).then(res => {
          if (res.data.isSuccess === 1) {
            let qjData = {
              zyzl: 0,
              xcSendNum: 0,
              xcArriveNum: 0,
              xcArriveCount: 0,
              zcSendNum: 0,
              xcSendCount: 0,
              zcArriveNum: 0
            }
            _.forEach(res.data.data, (item, key) => {
              let zyzl = +item.xcArriveCount + item.xcSendCount
              res.data.data[key].zyzl = +zyzl
              res.data.data[key].freeName = key
              qjData.zyzl += +zyzl
              qjData.xcSendNum += +item.xcSendNum
              qjData.xcArriveNum += +item.xcArriveNum
              qjData.xcArriveCount += +item.xcArriveCount
              qjData.zcSendNum += +item.zcSendNum
              qjData.xcSendCount += +item.xcSendCount
              qjData.zcArriveNum += +item.zcArriveNum
              qjData.freeName = '全疆'
            })
            this.toDayDataTitleList = qjData
            this.isload = true
            res.data.data['全疆'] = qjData
            dataListDay = res.data.data
            let obj = {
              'dataListDay': dataListDay,
              'time': moment().format()
            }
            obj = JSON.stringify(obj)
            localStorage.setItem('stationFreesDataTableDataListDay', obj)
          }
        })
      },
      loadstationFreesDataTableData () {
        let hasStationFreesDataTableDay = localStorage.hasOwnProperty('stationFreesDataTableDataListDay')
        if (hasStationFreesDataTableDay) {
          let obj = JSON.parse(localStorage.getItem('stationFreesDataTableDataListDay'))
          let sjd = moment((moment() - moment(obj.time))).minute()
          if (sjd >= 60) {
            localStorage.removeItem('stationFreesDataTableDataListDay')
            this.getTableDataDay()
          } else {
            this.toDayDataTitleList = obj.dataListDay['全疆']
            console.log(this.toDayDataTitleList)
            this.isload = true
          }
        } else {
          this.getTableDataDay()
        }
      }
    },
    mounted () {
      this.loadstationFreesDataTableData()
    },
    components: {}
  }
</script>

<style>
  #mapTitle {
  }

  #mapTitle .mapTitle {
    width: 360px;
    height: 70px;
    position: absolute;
    z-index: 600;
    left: 50%;
    top: 10px;
    margin-left: -180px;
    text-align: center;
  }

  #mapTitle .mapTitle h1 {
    font-size: 30px;
    letter-spacing: 0;
    font-weight: normal;
    text-align: center;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(113, 236, 255, 1)), to(rgba(0, 255, 229, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #mapTitle .mapTitle h4 {
    font-size: 12px;
    color: #00DCFF;
    letter-spacing: 5.3px;
    font-weight: normal;
    text-transform: uppercase;
  }

  #mapTitle .titleData {
    width: 540px;
    height: 60px;
    position: absolute;
    z-index: 600;
    left: 50%;
    top: 80px;
    margin-left: -270px;
    text-align: center;
  }

  #mapTitle .titleData .titleDataCol {
    width: 180px;
    height: 60px;
    float: left;
    text-align: center;
    font-size: 14px;
    color: #D0F3FF;
  }

  #mapTitle .titleData .titleDataCol .dataTitle {
    height: 20px;
    width: 100%;
    line-height: 20px;
  }

  #mapTitle .titleData .titleDataCol .data {
    height: 40px;
    width: 100%;
    line-height: 40px;
    font-size: 14px;
    color: #83BBCF;
  }

  #mapTitle .titleData .titleDataCol .data .dataArry {
    font-size: 24px;
    color: #F8E71C;
  }
</style>
